<template>
	<view>
		<!-- 工种选择 -->
		<u-popup v-model="addShow" mode="bottom" border-radius="20" :mask-close-able="false" closeable close-icon-size="40" duration="0"
			@close="setClose">
			<view class="setWrap_box">
				<view class="setHead_con" @click="setClose">
					<view class="setTit">工种选择</view>
				</view>
				<view class="treeBox">
					<view class="treeLeft">
						<view :class="'oneItem '+(kindIndex==index?'oneItemActive':'')" v-for="(item,index) in kindList"
							:key="index" @click="oneSelect(index)">
							{{item.name}}
						</view>
					</view>
					<view class="treeRight">
						<view :class="'twoItem '+(twoIndex==index?'twoItemActive':'')"
							v-for="(item,index) in kindList[kindIndex].child" :key="index" @click="twoSelect(index)">
							{{item.name}}
						</view>
					</view>
				</view>

				<!-- <view style="clear: both; width: 100%; height: 20rpx;"></view>
				<view class="tckBtn tckTop widthBox" >
					<view class="tckBtnItem"  @click="addSubmit(2)">
						<image src="/static/img/backHuifu.png" mode=""></image>
						取消
					</view>
					<view class="tckBtnItem"  @click="addSubmit(1)">
						<image src="/static/img/backSet.png" mode=""></image>
						确定
					</view>
				</view> -->

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {


		},
		data() {
			return {
				// 选择工种弹窗
				addShow: false,
				kindList: [],
				kindIndex: 1,
				twoIndex: -1,
			};
		},
		created() {
			var _this = this;
			_this.getKindList();
		},
		methods: {
			// 获取工种列表
			getKindList() {
				var _this = this;
				_this.$u.get('/api/project.job/getTree', {}).then(res => {
					uni.hideLoading();
					console.log("==获取工种列表==");
					console.log(res);
					_this.kindList = res.data;
				}).catch(res => {
					console.log(res);
				})
			},

			// 确定或取消
			addSubmit(type) {
				if (type == 1) {
					if (twoIndex == -1) {
						uni.showToast({
							title: '请选择工种',
							icon: 'error'
						})
						return;
					}
				}
			},

			// 左侧选择
			oneSelect(index) {
				this.kindIndex = index
				this.twoIndex = -1
			},

			// 左侧选择
			twoSelect(index) {
				var _this = this;
				var kindList = _this.kindList;
				var kindIndex = _this.kindIndex;
				_this.twoIndex = index
				_this.$parent.profession = kindList[kindIndex].child[index].name;
				_this.addShow = false
			},

			// 清空数据
			clearData() {
				console.log('开始执行数据清空')
				var _this = this;
				_this.$forceUpdate();
			},

			// 关闭设定弹窗
			setClose() {
				this.addShow = false;
			},

		},
	}
</script>

<style scoped lang="scss">
	.setWrap_box {
		height: 1000rpx;
		overflow-y: scroll;
	}

	.setHead_con {
		height: 100rpx;
		line-height: 100rpx;
		overflow: hidden;
	}

	.setTit {
		font-size: 30rpx;
		color: #000;
		text-align: center;
		width: 100%;
	}

	.treeBox {
		height: 900rpx;
	}

	.treeLeft {
		width: 180rpx;
		height: 100%;
		overflow-y: scroll;
		background-color: #F5F5F5;
		text-align: center;
		float: left;
	}

	.oneItem {
		height: 100rpx;
		width: 100%;
		line-height: 100rpx;
		border-bottom: 2rpx solid #fff;
	}

	.oneItemActive {
		color: $uni-color-white;
		background-color: $uni-color-active;
	}

	.treeRight {
		width: 570rpx;
		height: 100%;
		overflow-y: scroll;
		text-align: center;
		float: left;
	}

	.twoItem {
		min-height: 80rpx;
		width: 90%;
		line-height: 80rpx;
		border-bottom: 2rpx solid #fff;
		float: left;
		border-bottom: 2rpx solid #eee;
		margin-left: 5%;
		// margin-bottom: 20rpx;
		//border-radius: $uni-radius;
		overflow: hidden;
	}

	.twoItemActive {
		color: $uni-color-white;
		background-color: $uni-color-active;
		border: 2rpx solid $uni-color-active;
	}
</style>
